

import { apiGetCardDetail } from '../../api';
import { useEffect, useState } from 'react';
import { dictDataOptions, dictTag, PayType, } from '../../utils/utils';
import { keepCopy, tagCopy } from '../../components/tableColumn';
import { getDict } from '../../utils/utils';
import LoadingMask from '../../components/loadingMask';
import { Select, DatePicker, Tooltip } from '@arco-design/web-react';
import dayjs from 'dayjs';
const { MonthPicker } = DatePicker;
interface Props {
    iccid: string
}
// 系统开关 状态
const CARD_DETAIL_WALLET_LOG_BUSINESS_TYPE = 'card_detail_wallet_log_business_type';
export default function InProgress({ iccid }: Props) {
    const [dataSource, setdataSource] = useState<any[]>([])
    const [total, settotal] = useState(0)
    const [pageNum, setpageNum] = useState(1)
    const [pageSize, setpageSize] = useState(1000)
    const [time, settime] = useState('')
    const [status, setstatus] = useState('')
    const [filterData, setFilterData] = useState<any[]>([])
    const [dictDatas, setDictDatas] = useState<Record<string, any>>({});
    useEffect(() => {
        async function fetchDictData() {
            const data = await getDict(CARD_DETAIL_WALLET_LOG_BUSINESS_TYPE);
            setDictDatas(data);
        }

        fetchDictData();
    }, []);
    useEffect(() => {
        getList(iccid, pageNum, pageSize)
    }, [iccid])
    async function getList(iccid: string, pageNum: string | number, pageSize: string | number) {
        LoadingMask.show('正在加载...');
        const res = await apiGetCardDetail(iccid, pageNum, pageSize)
        if (res?.data?.rows?.length > 0) {
            setdataSource([...res.data.rows,])
            setFilterData([...res.data.rows,])
        }

        settotal(res?.data?.total)
        LoadingMask.hide();
    }
    function handlePageAndSizeChange(page: number, size: number) {
        if (page === pageNum && size === pageSize) return;

        setpageSize(size);
        setpageNum(page);
        getList(iccid, pageNum, pageSize)
    }


    // const columns = [
    //     {
    //         title: '业务号码',
    //         dataIndex: 'businessId',
    //         key: 'businessId',
    //         render: (v: string) => tagCopy(v),
    //         width: 90,
    //     },
    //     {
    //         title: '部门名称',
    //         dataIndex: 'deptName',
    //         key: 'deptName',
    //         width: 100,
    //     },
    //     {
    //         title: '充值卡号',
    //         dataIndex: 'iccid',
    //         key: 'iccid',
    //         render: keepCopy,
    //         width: 120,
    //     },
    //     {
    //         title: '业务类型',
    //         dataIndex: 'businessType',
    //         key: 'businessType',
    //         render: (v: string) => dictTag(v, dictDatas[CARD_DETAIL_WALLET_LOG_BUSINESS_TYPE]),
    //         width: 100,
    //     },
    //     {
    //         title: '原始金额',
    //         dataIndex: 'availableAmountSource',
    //         key: 'availableAmountSource',
    //         width: 100,
    //     },
    //     {
    //         title: '加减金额',
    //         dataIndex: 'availableAmountOperation',
    //         key: 'availableAmountOperation',
    //         width: 100,
    //     },
    //     {
    //         title: '当前余额',
    //         dataIndex: 'availableAmountTarget',
    //         key: 'availableAmountTarget',
    //         width: 100,
    //     },
    //     {
    //         title: '操作人',
    //         dataIndex: 'createBy',
    //         key: 'createBy',
    //         width: 100,
    //     },
    //     {
    //         title: '创建时间',
    //         dataIndex: 'createTime',
    //         key: 'createTime',
    //         width: 180,
    //     },
    //     {
    //         title: '原因',
    //         dataIndex: 'reason',
    //         key: 'reason',
    //         width: 100,
    //     },

    //     {
    //         title: '转卡记录',
    //         dataIndex: 'cardConvertList',
    //         key: 'cardConvertList',
    //         render: (v: string[]) => (v ?? []).join(';'),
    //         width: 100,
    //     },

    //     {
    //         title: '备注',
    //         dataIndex: 'remark',
    //         key: 'remark',
    //         width: 180,
    //     },
    // ];
    function getFilterType(s: string, data: any) {
        const list = data?.filter((item: any) => {
            if (s === '充值记录') {
                return (item.availableAmountOperation ?? 0) > 0
            } else if (s === '消费记录') {
                return (item.availableAmountOperation ?? 0) <= 0
            } else {
                return item
            }

        }) || []
        setFilterData(list)
    }
    function getFilter(t: string, s: string) {
        if (t) {
            const startTime = dayjs(t).startOf('month').format('YYYY-MM-DD HH:mm:ss');
            const endTime = dayjs(t).endOf('month').format('YYYY-MM-DD HH:mm:ss');
            const data = [...dataSource]
            const filter = data.filter((item) => {
                const createTime = dayjs(item.createTime).valueOf();
                const startValue = dayjs(startTime).valueOf();
                const endValue = dayjs(endTime).valueOf();

                return createTime >= startValue && createTime <= endValue;
            });
            if (s) {
                getFilterType(s, filter)
            } else {
                setFilterData(filter)
            }
        } else if (s) {
            getFilterType(s, dataSource)
        } else {
            setFilterData(dataSource)
        }
    }
    return (

        <div className='p-10 bw-100 bh-100 inProgress '>
            {/* <Fullscreen className='bw-100 bh-100'
                onFullscreenChange={(isFull) => {
                    setisFull(isFull)
                }}
            > */}
            <div className="jc-between bw-100 minh-200 d-flex-r ai-start flex-wrap" style={{
                rowGap: '0px',
                columnGap: '0px'
            }}>
                {/* <Table
                        className="custom-table-header-bg"
                        data={dataSource}
                        style={{height: '100%'}}
                        columns={columns}
                        pagination={false}
                        loading={loading}
                        scroll={!isFull ? { y: 350, x: 1000 } : { y: 'calc(100% - 90px)', x: 1000 }}
                        noDataElement={<Empty description={'暂无数据'} />}
                    />
                    <Pagination
                        className="pagination-block"
                        pageSizeChangeResetCurrent={false}
                        total={total || 0}
                        current={pageNum}
                        pageSize={pageSize}
                        showJumper
                        sizeCanChange
                        sizeOptions={main.defaultPageSizeOptions}
                        showTotal={(total) => `共${total}条`}
                        size="small"
                        onChange={handlePageAndSizeChange}
                    /> */}
                <div style={{ width: '100%' }} className='mb-10'>
                    <MonthPicker style={{ width: 200 }} allowClear placeholder='请选择时间' onChange={(value) => {
                        getFilter(value, status)
                        settime(value)
                    }} />
                    <Select
                        allowClear
                        placeholder='请选择类型'
                        style={{ width: '200px', float: 'right' }}
                        defaultValue={'全部'}
                        options={['全部', '充值记录', '消费记录']}
                        onChange={(value) => {
                            getFilter(time, value)
                            setstatus(value)
                        }}
                    />
                </div>
                {
                    filterData?.map((item, idx) => {
                        return <div
                            key={item.id! + idx}
                            className={`income-item ${dataSource.length - 1 === idx ? 'last' : ''} bg-white overflow-hidden position-relative  item-width-2 border-radius-20 mb-10`}
                        >
                            <img className="income-icon" src={PayType.typeIcon(item.payType!)} alt="" />
                            <div className="flex-1 ">
                                {/* <div className="font-16 mb-0-5">{PayType.typeStr(item.payType!)}</div> */}
                                <Tooltip content={item.remark} position='tl'>
                                    <div className="font-16 mb-0-5  line-height-30" >{item.businessTip}</div>
                                </Tooltip>

                                <div className="font-12 font-c9  line-height-30">{item.createTime}</div>
                                <div>操作前：<span className='font-cp'> ￥{item.availableAmountSource}</span> 操作后：<span className='font-cp'>￥{item.availableAmountTarget}</span></div>
                            </div>

                            <div className="d-flex-c align-items-end mr-10">
                                <div
                                    className={(item.availableAmountOperation ?? 0) > 0 ? '  line-height-30 font-cp font-size-16' : ' line-height-30 text-color-9 font-size-16'}
                                >
                                    ￥{item.availableAmountOperation}
                                </div>
                                <div className="font-size-12 font-c9  line-height-30">{item.iccid}</div>
                            </div>
                            {item.businessType === "returnPackOrder" && <div style={{ fontSize: '11px' }} className="position-absolute top-0 right-0 bg-p pl-5 pr-5 pt-3 pb-3 text-color-white border-radius-2">退款</div>}
                        </div>

                    })

                }


            </div>

            {/* </Fullscreen > */}

        </div >


    );
}

